<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>微博</title>
    <link href="../day21/weibo/weibo/style/weibo.css" rel="stylesheet" type="text/css" />
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="jyArea">

    </div>
</body>
<script type="text/babel">
    //创建axios实例  配置基础路径
    const request = axios.create({
            baseURL:'http://192.168.12.75:8081'
        })
        //响应拦截器
        request.interceptors.response.use(res=>{
            //解构状态ok  和 错误信息msg
            const {ok,msg}=res.data;
            // 判断是否为请求失败状态
            if(ok === -1){
                //弹出msg
                alert(msg)
                // 返回pending状态的promise对象,阻断
                return new Promise(()=>{})
            }
            //成功状态返回响应数据
            return res.data
        })
        //创建App 组件class
        class App extends React.Component{
            // chuangrefs
            content= React.createRef()
            //添加微博内容函数
            async addWeibo(){
                //获取input的value数据(微博内容)
                const content = this.content.current.value.trim();
                //判断是否有内容
                if(content.length===0){
                    alert('请输入内容');
                    return;
                }
                //post 请求 地址weibo  参数 content 
                 const result = await request.post('/weibo',{content})
                 //清空value值
                 this.content.current.value=null;
                 console.log(result);
                 //添加数据后调用获取微博函数渲染数据
                 this.getWeibo()
            }

            //获取微博请求函数
            async getWeibo(){
                const {contentList} = await request.get('/weibo',{
                    
                    params:{
                        pageNo:1,
                        pageSize:5
                    }
                })
                console.log(contentList)
                //设置状态数据
                this.setState({
                    contentList
                })
            }
            //挂载完成后调用获取函数
            componentDidMount(){
                this.getWeibo()
            }
             render() {
                     return (
                <>
                    <div className="takeComment">
                        <textarea ref={this.content} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                        <div className="takeSbmComment">
                            <input onClick={this.addWeibo.bind(this)} type="button" className="inputs" value=""/>
                        </div>
                    </div>


                    <div className="commentOn">
                        <div className="noContent" style={{display:this.state.contentList.length===0?'block':'none'}}>暂无留言</div>
                        <div className="messList">
                            {
                                this.state.contentList.map(item=>(
                                    <div className="reply" key={item._id}>
                                        <p className="replyContent">{item.content}</p>
                                        <p className="operation">
                                            <span className="replyTime">{item.addTime}</span>
                                            <span className="handle">
                                                <a href="" className="top">{item.topNum}</a>
                                                <a href="" className="down_icon">{item.downNum}</a>
                                                <a href="" className="cut">删除</a>
                                            </span>
                                        </p>
                                    </div>
                                ))    
                            }
                        </div>
                        <div className="page">
                            <a href="" className="active">1</a>
                            <a href="">2</a>
                            <a href="">3</a>
                        </div>
                    </div>
                </>
            )
        }
    
        }
    
       
       
    ReactDOM.createRoot(document.querySelector(".jyArea")).render(<App/>)
</script>

</html>